<template>
	<view class="costype">
		<uni-table ref="table" type="default" emptyText="暂无更多数据">
			<view v-if="form.duration.length>0">
				<view class="typeName">
					按时收费价格
				</view>
				<uni-tr class="tabTr">
					<uni-th align="center" style="background-color: #EFF8FF!important;">充电费用</uni-th>
				</uni-tr>
				<view v-for="(item, index) in form.duration" :key="index">
					<uni-tr class="tabTr">
						<uni-td align="center">
							<view class="tdView">
								{{ item.price }}元/{{ item.unit }}小时
							</view>
						</uni-td>
					</uni-tr>
				</view>
			</view>
			<view v-if="form.quantity.length>0">
				<view class="typeName">
					电费服务费单价
				</view>
				<uni-tr class="tabTr">
					<!-- <uni-th align="center" style="background-color: #EFF8FF!important;">收费(kW·h)</uni-th> -->
					<view class="title_th">
						<text>电费(kW·h)</text>
						<text>服务费(kW·h)</text>
					</view>
				</uni-tr>
				<view v-for="(item, index) in form.quantity" :key="index">
					<uni-tr class="tabTr">
						<view class="title_th price_info">
							<text>{{item.price}}元/kW·h</text>
							<text>{{item.serviceFee}}元/kW·h</text>
						</view>
					</uni-tr>
				</view>
			</view>
		</uni-table>
		<view style="color: #000000; font-size: 16px; margin: 10px 0px;">占仓费用</view>
		<view class="charge_bak">
			<view>充电完成后，{{ form.occupyFreeDuation || 0}}小时内免费。</view>
			<view>
				超出{{ form.occupyFreeDuation  || 0}}小时，按{{ form.occupyChargePrice  || 0}}元/{{ form.occupyChargeDuration  || 0}}小时收费，最高收费{{ form.occupyChargeUpperLimit  || 0}}元。
			</view>
			<view>免费占仓时段：{{ form.occupyFreeStartTime  || '00:00:00'}}-{{ form.occupyFreeEndTime  || '00:00:00'}}</view>
		</view>
		<view class="tips">说明：充电过程中，提前充满、充电器过载引起意外中断、用户主动停止充电等情况支付金额不予退还</view>
	</view>
</template>

<script>
	export default {
		props: {
			form: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			}
		},
		created() {
			console.log(this.form)
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/common.scss";

	.tdView {
		padding: 5px;
		text-align: center;
	}

	.typeName {
		color: #000000;
		font-size: 32rpx;
		line-height: 100rpx;
	}

	.title_th {
		line-height: 60rpx;
		background: #EFF8FF;
		@include flexLayout(center, center);

		text {
			display: inline-block;
			width: 50%;
			text-align: center;
		}

		text:first-child {
			border-right: 2rpx solid #FFFFFF;
		}
	}

	.price_info {
		line-height: 80rpx;
		color: #000000;
	}

	.charge_bak {
		background: #EFF8FF;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
	}

	.tips {
		font-size: 12px;
		margin: 30rpx 6rpx;
	}
</style>
